<template>
  <!-- 热门推荐 -->
  <view class="caption">
    <text class="text">热门推荐</text>
  </view>
  <view class="recommend">
    <navigator class="recommend-item" v-for="item in goodsList.records"  :key="item.id" 
      :url="`/pages/goods/goods?id=${item.id}`"> 
      <image class="image" mode="aspectFill" :src="item.mainImage"></image> 
      <view class="name"> {{ item.name  }} {{ item.description  }} </view>
      <view class="info">
        <view class="price">
          <text class="small">¥</text>
          <text>{{ item.basePrice  }}</text>
        </view>
        <view class="sales">已售 {{ item.sales  }} 件</view>
      </view>
    </navigator>
  </view>
  <view class="loading-text"> {{ finish ? '没有更多啦~' : '正在加载...' }} </view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getGoodsListAPI } from '@/services/mall';

const finish = ref(false)//是否加载完成

const goodsList = ref({
  records: [],
  total: 0
});

const pageParams = ref({
  page: 1,
  pageSize: 10
});



//获取商品展示列表
const getGoodsList = async () => {
  if (finish.value) {
    return uni.showToast({
      title: '没有更多啦~',
      icon: 'none'
    })
  }
  const res = await getGoodsListAPI(pageParams.value);
  //数组追加
  goodsList.value.records.push(...res.data.records);
  //判断是否还有下一页
  if (res.data.records.length >= pageParams.value.pageSize) {
    pageParams.value.page++;
  } else {
    finish.value = true
  }
}
//重置数据
const resetData = () => {
  goodsList.value.records = []
  pageParams.value.page = 1
  finish.value = false
}

defineExpose({
  resetData,
  getMore: getGoodsList
})


onMounted(() => {
  getGoodsList()
})
</script>
<style lang="scss">
:host {
  display: block;
}

/* 分类标题 */
.caption {
  display: flex;
  justify-content: center;
  line-height: 1;
  padding: 36rpx 0 40rpx;
  font-size: 32rpx;
  color: #262626;

  .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 28rpx 0 30rpx;

    &::before,
    &::after {
      content: '';
      width: 20rpx;
      height: 20rpx;
      background-image: url(@/static/images/bubble.png);
      background-size: contain;
      margin: 0 10rpx;
    }
  }
}

/* 热门推荐 */
.recommend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  .recommend-item {
    width: calc(50% - 10rpx); /* 50%宽度减去间距 */
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
    box-sizing: border-box; /* 确保padding包含在宽度内 */



 .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .price {
      line-height: 1;
      color: #cf4444;
      font-size: 26rpx;
    }
    .small {
      font-size: 80%;
    }
    .sales {
      font-size: 24rpx;
      color: #999;
    }

  }
  .image {
    width: 304rpx;
    height: 304rpx;
  }
  .name {
    height: 75rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* 添加标准属性 */
    -webkit-box-orient: vertical;
  }
}
// 加载提示文字
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>